<template>
  <div class="tabbar">
    <div @click="goRoute(1)"   class="tab">
      <i class="ri-pages-line" :class="{activ:num===1}"></i>
      <div>首页</div>
    </div>
    <div @click="goRoute(2)"  class="tab">
      <i class="ri-video-line" :class="{activ:num===2}"></i>
      <div>视频</div>
    </div>
    <div @click="goRoute(3)"  class="tab">
      <i class="ri-vip-crown-2-line" :class="{activ:num===3}"></i>
      <div>会员</div>
    </div>
  
    <div @click="goRoute(5)" to="/login" class="tab">
      <i class="ri-creative-commons-nd-line" :class="{activ:num===5}"></i>
      <div>我的</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Floor",
  data(){
      return {
         num:1
      }
  },
  methods:{
      goRoute (type){
        this.num = type
          if(type===1){
            this.$router.push('/home')
          }else if(type===2){
            this.$router.push('/video')
          }else if(type===3){
            this.$router.push('/vip')
          }else if(type===4){
            this.$router.push('/info')
          }else if(type===5){
            this.$router.push('/login')
          }
      }
  },
};
</script>

<style lang ="less" scoped>
.tabbar {
  width: 100%;
  display: flex;
  position: fixed;
  /* top: 650px; */
  bottom: 0;
  .tab {
    padding: 5px 0;
    display: flex;
    flex: 1;
    width: 20%;
    background-color: #fff;
    text-align: center;
    flex-direction: column;
    div{
      color: #666;
      margin-top: 5px;
    }
    i{
      color: #333;
      /* background-color: red; */
    }
    .activ{
      color: rgb(235, 174, 174);
    }
  }
}
</style>
